<template>
    <el-dialog class="ui-goods-sale-setting-dialog" v-model="dialogVisible" title="商品销售设置" ref="dialog" @closed="finalThings">
        <!--对话框内容-->
        <el-form ref="elForm" :rules="rules" :model="data" @submit.prevent="onSure">
            <el-form-item label-width="6.5rem" label="网费购买商品:" prop="auth">
                <el-switch v-model="data.auth" active-text="开启" inactive-text="关闭" inline-prompt active-color="#13ce66" inactive-color="#ff4949"></el-switch>
            </el-form-item>
            <el-form-item label-width="6.5rem" label="扣费方式:" prop="pay_type">
                <el-radio-group v-model="data.pay_type" :disabled="!data.auth">
                    <el-radio-button key="amount" label="amount">本金扣费</el-radio-button>
                    <el-radio-button key="give" label="give">本金加赠送扣费</el-radio-button>
                </el-radio-group>
            </el-form-item>
        </el-form>
        <template #footer>
            <div class="box-row">
                <div style="flex:1"></div>
                <el-button size="default" type="primary" @click="onSure">确认</el-button>
                <el-button size="default" type="danger" @click="onCancel">取消</el-button>
            </div>
        </template>
    </el-dialog>
</template>
<script>
import { reactive, toRefs } from 'vue'

export default {
    props:{
        q:Object,
        _compId:Number,
        done: Function,
        payload: {
            type:Object
        }
    },
    setup(props){
        let data = reactive({
            dialog:null,
            dialogVisible:true,
            loading:false,
            elForm:null,
            data:{
                auth:false
            },
            rules:{
                pay_type:[{required:true,message:'扣费方式必选', trigger:'blur'}]
            }
        });

        const methods = {
            onSure:()=>{
                data.elForm.validate().then(ret => {
                    console.log('onSure', data.data)
                }).catch(res=>{})
            },
            onCancel: ()=>data.dialogVisible = false,
            finalThings: () =>props.done(props._compId)
        }


        return {
            ...toRefs(data),
            ...methods
        }
    }
}
</script>
<style lang="scss">
.ui-goods-sale-setting-dialog{
    width: 35rem;
    .el-dialog__body{
        padding-top: 0;
        padding-bottom: 0;
    }
}
</style>